<template>
  <keep-alive>
    <div class="homeContent">
      <div class="Pop"></div>
      <div class="homeWrap">
        <div class="header">
          <i class="iconfont icon-dingwei"
            ><span class="address">范家新村广兰大道</span></i
          >
          <i class="iconfont icon-xiaoxi"></i>
        </div>
        <van-sticky :offset-top="20">
          <div class="search1">
            <van-search
              shape="round"
              class="goodSearch"
              v-model="searchGoods"
              placeholder="请输入搜索关键词"
            />
          </div>
        </van-sticky>
        <div class="fenlei1">
          <div class="fenleiitem1" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/1.png" alt="" />
            </div>
            <div class="ftext">美食</div>
          </div>
          <div class="fenleiitem1" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/2.png" alt="" />
            </div>
            <div class="ftext">甜点饮品</div>
          </div>
          <div class="fenleiitem1" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/3.png" alt="" />
            </div>
            <div class="ftext">超市便利</div>
          </div>
          <div class="fenleiitem1" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/4.png" alt="" />
            </div>
            <div class="ftext">蔬菜水果</div>
          </div>
          <div class="fenleiitem1" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/5.png" alt="" />
            </div>
            <div class="ftext">美团买药</div>
          </div>
        </div>
        <div class="fenlei2">
          <div class="fenleiitem2" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/6.png" alt="" />
            </div>
            <div class="ftext">夜宵</div>
          </div>
          <div class="fenleiitem2" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/7.png" alt="" />
            </div>
            <div class="ftext">海鲜大餐</div>
          </div>
          <div class="fenleiitem2" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/8.png" alt="" />
            </div>
            <div class="ftext">买酒</div>
          </div>
          <div class="fenleiitem2" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/9.png" alt="" />
            </div>
            <div class="ftext">校园食堂</div>
          </div>
          <div class="fenleiitem2" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/10.png" alt="" />
            </div>
            <div class="ftext">天天神券</div>
          </div>
        </div>
        <div class="fenlei3">
          <div class="fenleiitem3" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/11.png" alt="" />
            </div>
            <div class="ftext">拼好饭</div>
          </div>
          <div class="fenleiitem3" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/12.png" alt="" />
            </div>
            <div class="ftext">津贴联盟</div>
          </div>
          <div class="fenleiitem3" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/13.png" alt="" />
            </div>
            <div class="ftext">美团专送</div>
          </div>
          <div class="fenleiitem3" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/14.png" alt="" />
            </div>
            <div class="ftext">跑腿</div>
          </div>
          <div class="fenleiitem3" @click="haha">
            <div class="fimg">
              <img src="../assets/png/drawable-xhdpi/15.png" alt="" />
            </div>
            <div class="ftext">全部分类</div>
          </div>
        </div>
        <van-sticky :offset-top="53" @change="change">
          <div class="homechose" :class="{ isFixed: isFixed == true }">
            <span
              @click="changeType1"
              :class="{ Fixed: isFixed == true, active: active1 == true }"
              ><img src="../assets/png/drawable-xhdpi/16.png" alt=""
            /></span>
            <span
              @click="changeType2"
              :class="{ active: active2 == true, Fixed: isFixed == true }"
              >满减配送</span
            >
            <span
              @click="changeType3"
              :class="{ active: active3 == true, Fixed: isFixed == true }"
              >会员商家</span
            >
            <span
              @click="changeType4"
              :class="{ active: active4 == true, Fixed: isFixed == true }"
              >优惠商家</span
            >
          </div>
        </van-sticky>
        <div class="home">
          <van-loading class="loading" size="24px" v-if="pageLoading" color="#ffcd4d" />
          <div class="list" v-else>
            <van-list
              :finished="finished"
              finished-text="没有更多了"
              offset="50"
              @load="onLoad"
            >
              <CardItem
                :item="item"
                v-for="item in shoplist"
                :key="item.shoptype"
                @click="toDetail(item)"
              />
            </van-list>
          </div>
        </div>
      </div>
      <Tabbar :tab="0"></Tabbar>
    </div>
  </keep-alive>
</template>

<script>
import { useRouter } from "vue-router";
import Tabbar from "@/components/Tabbar";
import CardItem from "@/components/CardItem";
import { reactive, toRefs } from "@vue/reactivity";
import { computed, onMounted } from "@vue/runtime-core";
import { useStore } from "vuex";
import { ref } from "vue";
import { Toast } from "vant";
import { reqShoplist } from "../api";
export default {
  setup() {
    const router = useRouter();
    const searchGoods = ref("");
    const store = useStore();
    const state = reactive({
      isFixed: false,
      active1: false,
      active2: false,
      active3: false,
      active4: false,
      finished: true,
      shopdata: [],
      pageLoading: true,
    });
    onMounted(async () => {
      store.state.totalPrice = 0;
      store.state.CardItem = [];
      store.state.num = 0;
      const shoplist = await reqShoplist();
      state.shopdata = shoplist.mess;
      setTimeout(() => {
        state.pageLoading = false
      }, 200)
    });
    const changeType1 = () => {
      state.active1 = !state.active1;
    };
    const changeType2 = () => {
      state.active2 = !state.active2;
    };
    const changeType3 = () => {
      state.active3 = !state.active3;
    };
    const changeType4 = () => {
      state.active4 = !state.active4;
    };
    const change = (e) => {
      state.isFixed = e;
    };
    const shoplist = computed(() => {
      let newarr = [];
      for (let item of state.shopdata) {
        if (
          item.shopmark.gift * state.active1 +
            item.shopmark.drease * state.active2 +
            item.shopmark.member * state.active3 +
            item.shopmark.store * state.active4 ===
          0
        ) {
          newarr.push(item);
        }
      }
      return newarr;
    });
    const toDetail = (e) => {
      console.log(e);
      router.push(`/Detail/${e.shoptype}`);
      store.state.shopdetail = e;
    };
    const haha = () => {
      Toast("尽请期待");
    };
    return {
      ...toRefs(state),
      toDetail,
      searchGoods,
      changeType1,
      changeType2,
      changeType3,
      changeType4,
      change,
      shoplist,
      haha,
    };
  },
  components: {
    Tabbar,
    CardItem,
  },
};
</script>

<style lang="less" scoped>
.homeContent {
  background: #f4f4f4;
  position: fixed;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
  .header {
    width: 100%;
    height: 90px;
    background: #ffcd4d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    z-index: -1;
    .iconfont {
      font-size: 25px;
      .address {
        display: inline-block;
        font-size: 18px;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .search1 {
    width: 100%;
    height: 10%;
    transform: translateY(-20px);
    .goodSearch {
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
    }
  }
}
.homeWrap {
  width: 100%;
  height: 94%;
  overflow-y: scroll;
}
.fenlei1 {
  display: flex;
  box-sizing: border-box;
  padding-bottom: 20px;
  justify-content: space-between;
  padding: 0 20px;
  .fenleiitem1 {
    display: flex;
    flex-direction: column;
    height: 70px;
    justify-content: space-between;
    .fimg {
      width: 55px;
      height: 50px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .ftext {
      font-size: 13px;
      text-align: center;
    }
  }
}
.fenlei2 {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding: 0 22px;
  .fenleiitem2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 62px;
    .fimg {
      width: 30px;
      height: 30px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .ftext {
      font-size: 13px;
      text-align: center;
    }
  }
}
.fenlei3 {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding: 0 22px;
  .fenleiitem3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 62px;
    margin-bottom: 15px;
    .fimg {
      width: 30px;
      height: 30px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .ftext {
      font-size: 13px;
      text-align: center;
    }
  }
}
.isFixed {
  background: #fff;
}
.homechose {
  align-items: center;
  box-sizing: border-box;
  padding: 0 13px;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  .Fixed {
    background: #f4f4f4;
  }
  .active {
    background: #ffcc4d;
    font-weight: 600;
    color: #2d2d28;
  }
  span {
    color: #7c7c7c;
    font-weight: 530;
    height: 10px;
    line-height: 10px;
    background: #fff;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 13px;
    img {
      width: 50px;
      height: 15px;
      transform: translateY(-3px);
    }
  }
}

.home {
  .loading {
  text-align: center;
  top: 10vh;
}
}

.Pop {
  position: absolute;
  bottom: 0;
}
</style>